

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="座位号" width="250">
        <template slot-scope="scope">
          <i class="el-icon-user"></i>
          <span style="margin-left: 10px">{{ scope.row.positions }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="250">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag style="width: 100px" size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="用户Id" width="250">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag style="width: 100px"  size="medium">{{ scope.row.id }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="editAxios(scope.row.positions)">更新</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="deleteMessage(scope.row.positions)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0" :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog title="修改信息" :visible.sync="centerDialogVisible" width="30%" center>
      <div style="text-align: center">
        <el-select v-model="name3"  placeholder="请选择">
          <el-option  v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelEditAxios">取 消</el-button>
        <el-button type="primary" @click="sureEditAxios">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>

import {
  deletePositionById,
  getPositionListByPageParam,
  getUserList,
  updatePositionById
} from "@/api/wlwsys/jintao/main";

export default {
  created() {
    this.getList()
  },
  data() {
    return {
      tableData: [],
      centerDialogVisible: false,
      position3:null,
      name3:'',
      options:[],
// 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total:0,
    }
  },
  methods: {
    //分页查询
    getList() {
      getPositionListByPageParam(this.queryParams).then(result=>{
        this.total = result.total;
        this.tableData = [];
        console.log(result.rows)
        for(var i=0;i<result.rows.length;i++){
          var temp = {
            positions : result.rows[i].position_id,
            name : result.rows[i].nick_name,
            id: result.rows[i].user_id
          }
          this.tableData.push(temp)
        }
      })

    },
    editAxios(position){
      this.name3=''
      this.position3 = position
      this.centerDialogVisible=true;
      getUserList().then(req=>{
        this.options = [];
        console.log(req);
        for(var i=0; i<req.length;i++){
          const p = {
            value:req[i].userId+' -- '+req[i].userName,
            label:req[i].userId+' -- '+req[i].userName,
          }
          this.options.push(p);
        }
      })
    },
    deleteMessage(position) {
      // console.log(position)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        console.log(position)
        deletePositionById(position,this.queryParams).then(result=>{
          this.getList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    cancelEditAxios(){
      this.centerDialogVisible = false
      alert('已经取消')
    },
    sureEditAxios(){
      this.centerDialogVisible = false
      const s = this.name3.split(" ")
      updatePositionById(s[0],s[1],this.position3).then(result=>{
        this.getList()
      })
      this.name3 = 0
    }
  }
}
</script>


